﻿@{
    ViewBag.Title = "Ryan Butler.org : ASP.NET MVC Contact Form";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<h1>Creating a <abbr title="Active Server Pages">ASP</abbr>.NET <abbr title="Model View Controller">MVC</abbr> Contact Form</h1>
<h3>Adjusting <abbr title="Cascading Style Sheets">CSS</abbr></h3>
<p>From the solution explorer, open the <abbr title="Cascading Style Sheets">CSS</abbr> file by following these steps:</p>
<ul>
<li>Expand <span class="special">Content, and double &#8212;click <span class="special">Site.css</span></span></li>
</ul>
<p>Let’s first tackle our form fields. In <span class="special">Site.css</span>, at line 427, comment out the following <abbr title="Cascading Style Sheets">CSS</abbr>:</p>
<pre class="brush:css">
/*input, textarea {
border: 1px solid #e2e2e2;
background: #fff;
color: #333;
font-size: 1.2em;
margin: 5px 0 6px 0;
padding: 5px;
width: 300px;
}
*/
</pre>
<p>Next, at line 453, comment out the following <abbr title="Cascading Style Sheets">CSS</abbr>:</p>
<pre class="brush:css">
/*input[type="submit"],
input[type="button"],
button {
background-color: #d3dce0;
border: 1px solid #787878;
cursor: pointer;
font-size: 1.2em;
font-weight: 600;
padding: 7px;
margin-right: 8px;
width: auto;
}
*/
</pre>
<p>Save your changes, and preview the results in a web browser, results should be as illustrated:</p>
<p class="align"><a href="@Url.Content("~/content/aspmvcform/images/14.png")" data-lightbox="image-14"><img src="@Url.Content("~/content/aspmvcform/thumbs/14.png")" alt="Preview of Finished form" width="250" height="139" /></a></p>
<p>Once finished, return to Visual Studio and stop debugging by pressing the stop button or by pressing Shift + F5.</p>
<p>Add the following <abbr title="Cascading Style Sheets">CSS</abbr> at the end of our style sheet:</p>
<pre class="brush:css">
/* new styles */
div.row
{
clear:left;
margin:6px;
}
label
{
float:left;
width:200px;
}
textarea
{
width:200px;
height:100px;
}
div.buttons
{
margin-left:150px;
margin-top:16px;
}
</pre>
<p>As you can see from the code above, we:</p>
<ol>
<li>Create a class named row and assign the following property&#8212;values:
<ol type="a">
<li>Clear:
<ol type="i">
<li>Set to left</li>
</ol>
</li>
<li>Margin:
<ol type="i">
<li>Set to 6 pixels</li>
</ol>
</li>
</ol>
</li>
<li>Select our label form field and assign the following:
<ol type="a">
<li>Float:
<ol type="i">
<li>Set to left</li>
</ol>
</li>
<li>Width:
<ol type="i">
<li>Set to 200 pixels</li>
</ol>
</li>
</ol>
</li>
<li>Select our textarea form field, and assign the following:
<ol type="a">
<li>Width:
<ol type="i">
<li>Set to 200 pixels</li>
</ol>
</li>
<li>Height:
<ol type="i">
<li>Set to 100 pixels</li>
</ol>
</li>
</ol>
</li>
<li>Create a class named buttons, and assign the following:
<ol type="a">
<li>Margin left:
<ol type="i">
<li>Set to 150 pixels</li>
</ol>
</li>
<li>Margin top:
<ol type="i">
<li>Set to 16 pixels</li>
</ol>
</li>
</ol>
</li>
</ol>
<p>Save your changes. Results should be as illustrated in a web browser.</p>
<p class="align"><a href="@Url.Content("~/content/aspmvcform/images/15.png")" data-lightbox="image-14"><img src="@Url.Content("~/content/aspmvcform/thumbs/15.png")" alt="" width="250" height="170" /></a></p>
<p>Once finished, return to Visual Studio and stop debugging by pressing the stop button or by pressing Shift
+ F5. Close Site.css within Visual Studio.</p>
<h3>Working with our controller</h3>
<p>As you might recall from earlier, our controller includes actions that cause our razor pages to display
within the <abbr title="Active Server Pages">ASP</abbr> <abbr title="Model View Controller">MVC</abbr> framework. When previewing our contact razor page, the reason it works initially is
because we have an implicit <span class="special">GET</span>action that returns our view. We can see this code by opening our <span class="special">HomeController.cs</span>by following these steps:</p>
<ul>
<li>From the solution explorer, expand <span class="special">Controllers, and then double &#8212; click <span class="special">HomeController.cs</span></li>
</ul>
<p>In our controller, we see three implicit GET actions: (1) Index, (2) About, and (3) Contact. They simply
return a view, in our case, razor pages.</p>
<p>In <abbr title="Active Server Pages">ASP</abbr> <abbr title="Model View Controller">MVC</abbr>, actions are either get or post. <span class="special">GET</span> as already mentioned is the implied choice. A <span class="special">POST</span> is
when you cause a <span class="special">post back</span> to occur on the server. The concept of post back is best described as code that
we want to run on the server, such as validation of our form fields, emailing the recipient of a contact
form results, or performing database operations. Put in another context, when posting to a server, a
specific kind of business logic is occurring on the server before the resulting output is sent to the browser.</p>
<p>In our case, the business logic is the initial validation check on our required fields, and then sending the
mail to the specified recipient once validation passes.</p>
<h3>Adding the post action within our controller</h3>
<p>In <span class="special">HomeController.cs</span>, add the following name space:</p>
<pre class="brush:csharp highlight:[6]">
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.Net.Mail;
</pre>
<p>As you can see from the code above, we added the <span class="special">System.Net.Mail</span> name space which will allow us to
work with the mail and <abbr title="Simple Mail Transfer Protocol">SMTP</abbr> client class, which will handle various functionality related to mailing and
sending an e&#8212;mail of the results from our form to a specified recipient. While we’re at it, let’s add a
reference to our model as illustrated:</p>
<pre class="brush:csharp highlight:[7]">
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.Net.Mail;
using Mvc4ContactForm.Models;
</pre>
<p>As you can see from the code above, we added a reference to our models.</p>
<p>We'll continue by adding validation to our controller @Html.ActionLink("next","Index4").</p>
<p><a href="#top">top of page</a></p>